<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>权限管理</title>
    <th:block th:replace="welcome :: static-file"></th:block>
</head>
<body>
<th:block th:replace="welcome :: navbar"></th:block>
<div class="layui-container">
    <table id="demo" lay-filter="test"></table>
    <div class="layui-row">
        <div class="layui-col-md6">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">权限名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required
                               lay-verify="required" placeholder="请输入权限名" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <textarea name="remark" placeholder="请输入描述" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="addForm">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script>
var listTable ;
layui.use('table', function(){//监听提交

  var table = layui.table;
  //第一个实例
  listTable = table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/authority/all' //数据接口
    // ,page: true //开启分页
    ,cols: [
    [ //表头
        {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'name', title: '权限名', }
      ,{field: 'remark', title: '备注',   sort: true}
    ]
    ]
  });

});
layui.use('form', function(){
  var form = layui.form;
    form.on('submit(addForm)', function(data){
         $.post({
            url:'/authority/add',
            data: JSON.stringify(data.field),
            contentType:'application/json',
            success:function(resp){
                if (resp.ok){
                    layer.msg(`权限${data.field.name}注册成功`);
                    $("button[type='reset']").click()
                    listTable.reload()
                }
                else layer.msg(`权限${data.field.name}注册失败!${resp.msg}`)
            }
        })
        return false;
      });

});
</script>
</html>